<template>
	<div class="art_item">
		<div v-if="item.cover" class="cover">
			<img :src="item.cover" alt="封面" class="cover_img" />
		</div>
		<div class="art_info" @click="handleItemClick(item)">
			<h5 class="art_title" :title="item.title">{{ item.title }}</h5>
			<div class="art_digest">{{ item.digest }}</div>
			<div class="art_time">发布于：{{ item.createTime }}</div>
		</div>
	</div>
</template>

<script setup lang="ts">
defineProps({
	item: {
		type: Object,
		default: () => {}
	}
})
const emit = defineEmits(['cardClick'])
function handleItemClick(item: any) {
	emit('cardClick', item)
}
</script>

<style lang="less" scoped>
@import url('@/assets/css/constants.less');

.art_item {
	display: flex;
	align-items: center;
	width: 100%;
	height: 230px;
	margin-bottom: 40px;
	background: #fcfcfc;
	box-shadow: @boxShadow;
	border-radius: 10px;
	overflow: hidden;
	transition: 0.2s;
	&:hover {
		box-shadow: @hoverBoxShadow;
	}
	&:hover .cover .cover_img {
		transform: scale(1.1);
	}
	&:hover .art_info .art_title {
		text-decoration: underline;
	}
	.cover {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 280px;
		height: 100%;
		border-right: 1px solid rgba(0, 0, 0, 0.1);
		overflow: hidden;
		.cover_img {
			height: 100%;
			transition: 0.2s;
		}
	}
	.art_info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
		width: calc(100% - 280px);
		height: 100%;
		padding: 20px 30px;
		cursor: pointer;
		.art_title {
			width: 100%;
			font-size: 18px;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden; //溢出内容隐藏
			text-overflow: ellipsis; //文本溢出部分用省略号表示
			display: -webkit-box; //特别显示模式
			-webkit-line-clamp: 2; //行数
			line-clamp: 2;
			-webkit-box-orient: vertical; //盒子中内容竖直排列
		}
		.art_digest {
			font-size: 15px;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden; //溢出内容隐藏
			text-overflow: ellipsis; //文本溢出部分用省略号表示
			display: -webkit-box; //特别显示模式
			-webkit-line-clamp: 4; //行数
			line-clamp: 4;
			-webkit-box-orient: vertical; //盒子中内容竖直排列
		}
		.art_time {
			font-size: 14px;
			color: rgb(150, 150, 150);
		}
	}
}
</style>
